<template>
  <el-form :model="ruleForm" ref="ruleForm" label-width="130px" class="demo-ruleForm">
    <el-form-item label="区域" prop="cityId" style="width: 100%">
      <el-cascader
        placeholder="请选择"
        :options="options"
        filterable
        @active-item-change="handleItemChange"
        v-model="ruleForm.cityId"
        clearable
        :props="props"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')"
                 :loading="submitStatus">确定
      </el-button>
    </el-form-item>
  </el-form>
</template>
<script>
  import * as types from '../../store/mutations-type'
  import api from '../../store/api'
  var format = require('../../util/util')
  import axios from 'axios'
  export default {
    data () {
      return {
        handle: 'add',
        submitStatus: false,
        ruleForm: {
          cityId: []
        },
        flag: {
          a: '',
          b: ''
        },
        options: [{
          value: '28',
          label: '甘肃'
        }],
        props: {
          value: 'id',
          label: 'cityName'
        }
      }
    },
    props: ['imageId', 'getTableData'],
    methods: {
      handleItemChange (val) {
        var len = val.length - 1
        if (val.length === 1) {
          this.options.map((item, index) => {
            if (item.id === val[len]) {
              this.flag.a = index
              return
            }
          })
          this.getCityLib(val[len])
            .then(result => {
              this.options[this.flag.a].children = result
            })
        }
      },
      getCityLib (id) {
        let url = api.cityLib
        url = id ? url + '?parentId=' + id : url
        return new Promise((resolve, reject) => {
          axios.get(url)
            .then(response => {
              const result = response.data
              if (result.success) {
                resolve(result.data)
                this.getCity()
              } else {
                reject(result)
              }
            })
        })
      },
      getCity () {
        axios.get(api.getCity + '?imageId=' + this.imageId).then(response => {
          const result = response.data
          if (result.success) {
            if (result.data.length !== 0) {
              this.ruleForm.cityId.push(result.data[0].cityPid)
              this.options.map((item, index) => {
                if (item.id === result.data[0].cityPid) {
                  this.flag.a = index
                  return
                }
              })
              if (result.data[0].cityPid) {
                axios.get(api.cityLib + '?parentId=' + result.data[0].cityPid)
                  .then(result1 => {
                    this.options[this.flag.a].children = result1.data.data
                    this.ruleForm.cityId.push(result.data[0].cityId)
                  })
              }
            }
          }
        })
      },
      submitForm (formName) {
        this.submitStatus = true
        let para = {
          imageId: this.imageId,
          cityId: this.ruleForm.cityId[1]
        }
        if (para.cityId) {
          para = format.formatString(para)
          axios.put(api.cityAdd + '?' + para).then(response => {
            var result = response.data
            if (result.success) {
              this.$message({
                message: '区域绑定成功',
                type: 'success'
              })
              this.submitStatus = false
              this.$store.dispatch(types.ROLL_CLOSE_FORM)
            } else {
              this.submitStatus = false
              this.$message.error({
                title: '错误',
                message: result.message
              })
            }
            this.getTableData()
          }, (err) => {
            this.$message.error({
              title: '错误',
              message: err.response.data.message
            })
            this.submitStatus = false
          })
        } else {
          para = format.formatString(para)
          axios.put(api.cityAdd + '?' + para).then(response => {
            var result = response.data
            if (result.success) {
              this.$message({
                message: '区域删除成功',
                type: 'success'
              })
              this.submitStatus = false
              this.$store.dispatch(types.ROLL_CLOSE_FORM)
            } else {
              this.submitStatus = false
              this.$message.error({
                title: '错误',
                message: result.message
              })
            }
            this.getTableData()
          }, (err) => {
            this.$message.error({
              title: '错误',
              message: err.response.data.message
            })
            this.submitStatus = false
          })
        }
      }
    },
    mounted () {
      this.getCityLib()
        .then(result => {
          this.options = result
          if (this.formType === 'update') {
            let cityId = []
            cityId.push(this.ruleForm.cityId[0])
            this.handleItemChange(cityId)
          }
        })
    }
  }
</script>
<style>
  .demo-ruleForm {
    width: 440px;
  }
</style>
